Stop the page from jumping

You know the feeling. You go to tap a link, an image finishes loading somewhere above it, and you tap an advertisement instead. It is one of the few web problems that is genuinely infuriating rather than merely annoying, and almost all of it comes from four places.

1. Images with no dimensions

By far the most common. The browser cannot reserve space for something whose size it does not know, so it reserves nothing and then shoves everything down when the bytes arrive.

<img src="/templates/origin/cover.jpg" width="1600" height="1000" alt="">

Those two attributes do not fix the size of the image — CSS still wins — but they give the browser the aspect ratio, which is all it needed. This is a thirty-second fix and it removes most of the problem on most sites.

2. Web fonts

The fallback renders, the real font arrives, every line rewraps. font-display: swap makes it fast rather than invisible, but the reflow is still there.

The real fix is picking a fallback with similar metrics and declaring the adjustments, so the two faces occupy nearly the same space:

@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica Neue");
  size-adjust: 107%;
  ascent-override: 90%;
}

3. Content injected above the fold

Banners, consent notices, promotional strips. Anything that appears after paint and pushes the page down. If it has to exist, give it a reserved slot before it loads, or let it overlay rather than displace.

4. Animating the wrong properties

Transitioning height, width, top or margin moves everything around it on every frame. transform and opacity do not, because they never touch layout.

Three of these four take a minute each. The fonts one takes an afternoon. Between them they are almost the whole score.